<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>待办列表</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
    
        a {
            text-decoration: none;
        }
    
        section {
            position: absolute;
            top: 20%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 50%;
    
        }
    
        form {
            display: flex;
            justify-content: center;
    
        }
    
        li {
            list-style: none;
            display: flex;
           
            border: 1px solid black;
            border-radius: 10px;
            margin-top: 10px;
            padding: 10px 20px;
        }
    
        li div {
            position: absolute;
            right: 0;
        }
    
        .list input[type='checkbox']:checked+span {
            
            text-decoration: line-through;
          
        }
    </style>
</head>
<body>
  <section>
    <form action="" autocomplete="off">
        <input type="text" name="massage" placeholder="请输入待办任务"style="width: 500px ;height: 40px;">
        <button type="submit" style="margin-left: 10px;width: 40px;color: rgb(213, 80, 80);font-weight: bold;background-color: rgb(242, 239, 235);">Add</button>
    </form>
    <ul class="list">

    </ul>
</section>
<script>
    const todolist = [
        // { id: 1, title: '任务1', isCompleted: false },
        // { id: 2, title: '任务2', isCompleted: false },
        // { id: 3, title: '任务3', isCompleted: false },
        // { id: 4, title: '任务4', isCompleted: false },
        // { id: 5, title: '任务5', isCompleted: false },
    ]

    const list = document.querySelector('.list')
    function renderList() {
        list.innerHTML = ''
        for (let i = 0; i < todolist.length; i++) {
            const li = document.createElement('li')
            list.appendChild(li)
            li.innerHTML = `
        <input type="checkbox">
        <span data-title="${todolist[i].title}">${todolist[i].title}</span>
        <div><a href="javascript:" data-id="${i}">Revise </a>|<a href="javascript:"data-id="${i}">Delete&nbsp&nbsp</a></div>
        `
        }
    }

    renderList()


    function todo(title) {
        todolist.push({ di: todolist.length + 1, title: title, isCompleted: false })

        renderList()
    }

 
    const form = document.querySelector('form')
    form.addEventListener('submit', function (e) {
     
        e.preventDefault()
     
        const msg = document.querySelector('[name=massage]').value
      
        !msg ? alert('请输入代办任务') : todo(msg)
      
        form.reset()
    })

    list.addEventListener('click', function (e) {
        if (e.target.tagName === 'A' && e.target.innerHTML === 'Delete') {
            todolist.splice(e.target.dataset.id, 1)
            renderList()
        }
        if (e.target.tagName === 'A' && e.target.innerHTML === 'Revise') {
            const changeValue = prompt('要修改的内容', document.querySelector(`ul li:nth-child(${+e.target.dataset.id + 1}) span`).innerHTML)
            if (!changeValue) {
                todolist.splice(e.target.dataset.id, 1)
            }
            else {
                todolist[e.target.dataset.id].title = changeValue
            }
            renderList()
        }
    })
</script>
</body>
</html>